<script setup lang="ts">
import { useDictOptions } from '@/hooks'

defineOptions({
  name: 'DictSelect',
})
const props = withDefaults(
  defineProps<{
    code?: string
    type?: 'select' | 'radio' | 'button' | 'switch' | 'status' | 'boolean' | 'checkbox'
    options?: Array<any>
  }>(),
  {
    code: undefined,
    type: 'select',
    options: undefined,
  },
)

const emits = defineEmits(['change'])
const attrs = useAttrs()
const model = defineModel<string | boolean | number | Array<any>>()
const dictOptions = computed(() => {
  if (props.code) {
    return useDictOptions(props.code)
  } else {
    return props.options?.map((item) => {
      return { label: item.label || item.name, value: item.id }
    })
  }
})

const onChange = (item) => {
  emits('change', item)
}
</script>

<template>
  <a-radio-group v-if="type === 'radio'" v-model="model" type="radio" :options="dictOptions" v-bind="attrs" @change="onChange" />
  <a-radio-group v-else-if="type === 'button'" v-model="model" type="button" :options="dictOptions" v-bind="attrs" @change="onChange" />
  <a-switch v-else-if="type === 'status'" v-model="model" type="round" :checked-value="1" :unchecked-value="0" checked-text="启用" unchecked-text="禁用" v-bind="attrs" @change="onChange" />
  <a-switch v-else-if="type === 'boolean'" v-model="model" type="round" :checked-value="true" :unchecked-value="false" checked-text="是" unchecked-text="否" v-bind="attrs" @change="onChange" />
  <a-switch v-else-if="type === 'switch'" v-model="model" type="round" :checked-value="1" :unchecked-value="0" v-bind="attrs" @change="onChange" />
  <a-checkbox-group v-else-if="type === 'checkbox'" v-model="model" :options="dictOptions" v-bind="attrs" @change="onChange" />
  <a-select v-else v-model="model" :options="dictOptions" allow-clear v-bind="attrs" @change="onChange" />
</template>

<style lang="less" scoped>
</style>
